@import '@/app/styles/variables';

.grid {
  display: flex;
  flex-direction: column;
  gap: 20px;

  & > *:nth-child(2) {
    display: none;
  }

  & > *:nth-child(4) {
    order: 4;
  }

  & > *:nth-child(6) {
    order: 6;
  }

  & > *:nth-child(7) {
    order: 7;
  }
}

@include media-min(sm) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 40px;

    & > *:nth-child(1) {
      grid-row: 1 / span 2;
    }

    & > *:nth-child(2) {
      display: block;
    }

    & > *:nth-child(5) {
      grid-row: 3 / span 5;
      grid-column: 2;
    }

    & > *:nth-child(6) {
      grid-row: 4 / span 5;
      grid-column: 1;
    }
  }
}

@include media-between(1025px, 1060px) {
  .grid {
    column-gap: 9px;
  }
}

@include media-min(md) {
  .grid {
    gap: 60px;
  }
}
